<template>
	<view class="headSection">
		<view 
			class="header" 
			:style="{ position: headerPosition, top: headerTop, backgroundColor: `rgba(255, 255, 255, ${headerOpacity})` }"
		>
			<!-- 扫码操作 -->
			<view class="icon-btn">
				<view class="uni-icon uni-icon-scan" 
					:style="{ color: headerIconColor }" 
					@tap="toScan" 
				/>
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<view class="uni-icon uni-icon-search"></view>
				<input
					placeholder="输入搜索内容..."
					placeholder-style="color:#c0c0c0;"
					@tap="toSearch()"
				/>
			</view>
			<!-- 右侧图标按钮 -->
			<view class="icon-btn">
				<view class="uni-icon uni-icon-chat" 
					:style="{ color: headerIconColor }" 
					@tap="toMsg" 
				/>
			</view>
		</view>
		<view class="placeHolder"></view>
	</view>
</template>

<script>	
	export default {
		name: 'headSection',
		props: {
			pageScroll: {
				type: Object,
				default: () => {
					return {
						scrollTop: 0
					};
				}
			},
			position: {
				type: String,
				default: 'absolute'
			},
			top: {
				type: [String, Number],
				default: 0
			}
		},
		computed: {
			headerOpacity() { // header背景不透明度
				if(this.position == 'fixed') 
					return this.pageScroll.scrollTop *0.01;
				else return 1;
			},
			headerIconColor() { // header图标颜色
				if(this.position == 'fixed') 
					return this.pageScroll.scrollTop > 40 ? '#000' : '#fff';  
				else return '#000';
			},
			headerPosition() {
				return this.position;
			},
			headerTop() {
				return typeof this.top == 'Number' ? this.top + 'px' : this.top;
			}
		},
	}
</script>

<style lang="scss">
	.headSection {
		.header {
			width: 92%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			top: 0;
			z-index: 10;
			color: #fff;
			.input-box {
				color: #ababab;
				width: 80%;
				height: 60upx;
				background-color: rgba(231, 231, 231, 0.7);
				border-radius: 30upx;
				position: relative;
				display: flex;
				align-items: center;
				.uni-input-placeholder{
					color: #ababab !important;
				}
				.uni-icon {
					margin-left: 28upx;
					color: #ababab;
				}
				input {
					margin-left: 10upx;
					height: 30upx;
					font-size: 30upx;
				}
			}
			.icon-btn{
				width: 50upx;
				height: 50upx;
				flex-shrink: 0;
				display: flex;
				.uni-icon{
					width: 50upx;
					height: 50upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 50upx;
				}
			}
		}
		.placeHolder{height: 100upx;}
	}
</style>
